<template>
    <div class="common allianceUnit">
        <innerCommon 
            :location="location"
        >
        <template slot="left">
            <span>联盟单位列表</span>
            <a-input-search class="inputStyle" placeholder="搜索申请单位名称"  v-model="searchValue" enter-button @search="onSearch" />
        </template>
        <div slot="table">
            <a-table 
                size="middle"
                :columns="columns" 
                :data-source="list" 
                :pagination="pagination"
                :rowKey="record=>record.id"
                @change="changePage"
                :locale="{'emptyText': '暂无数据'}"
                bordered>
                <div slot="status" slot-scope="index,record">
                    <span v-if="record.status==0" style="color:orange">未审核</span>
                    <span v-else-if="record.status==1" style="color:green">已通过</span>
                    <span v-else style="color:red">已拒绝</span>
                </div>
                <div slot="action" slot-scope="index,record" class="tableAction">
                    <span @click="toDetail(record)">查看详情</span>
                    <confirmBox
                        @handleOk="pass(0,record)"
                        :typeName="'通过'"
                    ></confirmBox>
                    <confirmBox
                        @handleOk="pass(1,record)"
                        :typeName="'不通过'"
                    ></confirmBox>
                    <confirmBox
                        @handleOk="stayAtTop(record)"
                        :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                    ></confirmBox>
                </div>
            </a-table>
        </div>
        </innerCommon>
        <detailModal
            :dataList="dataList"
            :detailBox="detailBox"
            @cancel="detailBox=false"
            v-if="info"
        >   
            <div slot="logo">
                <img style="height:100px" v-if="info.institute.logo" :src="info.institute.logo" alt="">
                <span v-else>暂无</span>
            </div>
            <div slot="info">
                <div v-html="info.institute.info" class="ql-editor" style="padding:10px;border:1px solid #ddd;max-height:400px;overflow-y:scroll"></div>
            </div>
        </detailModal>
        <!-- <a-modal
            title="详情"
            :visible="detailBox"
            @cancel="detailBox=false"
            :footer="null"
            :destroyOnClose="true"
            width="700px"
            >
            <div class="detail">
                <ul>
                    <div><img src="../assets/logo.png" alt=""></div>
                    <li>
                        <span>单位名称：</span>
                        <span>{{info.institute&&info.institute.name}}</span>
                    </li>
                    <li>
                        <span>单位类型：</span>
                        <span>{{info.institute&&info.institute.role}}</span>
                    </li>
                    <li>
                        <span>单位介绍：</span>
                        <span>{{info.institute&&info.institute.info}}</span>
                    </li>
                </ul>
            </div>
        </a-modal> -->
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '申请单位',
        dataIndex: 'unitname',
    },{
        title: '单位属性',
        dataIndex: 'role',
    },{
        title: '审核人',
        dataIndex: 'publisher',
    },{
        title: '审核时间',
        dataIndex: 'pubTime',
        width:200
    },{
        title: '申请时间',
        dataIndex: 'createTime',
        width:200
    },{
        title: '审核状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
import confirmBox from "@/components/common/confirmBox"
import detailModal from "@/components/common/detailModal"
import innerCommon from "@/components/common/innerCommon"
import {getUnitDetailApi,getUnitPassApi,getUnitRefuseApi,unitStayAtTopApi,allianceSearchApi} from "@/request/api"
export default {
    name:"allianceUnit",
    components:{innerCommon,detailModal,confirmBox},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.location=[{
            name:"产教融合",
            path:''
        },{
            name:"联盟单位",
            path:'/allianceUnit'
        }]
        this.init()
    },
    data(){
        return{
            columns,
            list:[],
            detailBox:false,
            location:[],
            pagination:{pageSize:10,total:0,current:1},
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:''
            },
            dataList:[],
            searchValue:'',
            info:null
        }
    },
    methods:{
        init(){
            this.getToken(allianceSearchApi,this.searchInfo,res=>{
                this.dealData(res.data.rows,res.data.count)
            })
        },
        onSearch(data){
            this.searchInfo.keyword=data.trim()
            this.changePage({current:1})
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        dealData(list,total){
            this.list=list.map((item,index)=>({
                ...item,
                'index':(this.searchInfo.page-1)*10+index+1,
                'unitname':item.institute&&item.institute.name,
                'publisher':item.publisher&&item.publisher.name,
                'role':item.institute&&item.institute.role
            }))
            this.pagination.total=total
        },
        toDetail(data){
            this.getToken(getUnitDetailApi,{allianceId:data.id},res=>{
                this.detailBox=true;
                let info=res.data
                this.info=res.data
                this.dataList=[
                    {
                        'name':'单位logo',
                        'scopedSlots':{"customRender":'logo'}
                    },{
                        'name':'单位名称',
                        'info':info.institute&&info.institute.name
                    },{
                        'name':'单位类型',
                        'info':info.institute&&info.institute.role
                    },{
                        'name':'单位介绍',
                        'scopedSlots':{"customRender":'info'}
                    }
                ]
            })
        },
        pass(type,data){
            let api=type==0?getUnitPassApi:getUnitRefuseApi
            this.getToken(api,{'allianceId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(data){
            this.getToken(unitStayAtTopApi,{'allianceId':data.id,'stayAtTop':data.stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        }
    }
}
</script>
